<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>$.ajax</title>
    </head>
    <body>
        <button id="bt">查询数据</button>
    </body>

    <script src="js/jquery-3.6.0.js"></script>
    <script>

        $('#bt').click(function () {
            $.ajax({
                type: "get",        // 请求方式
                url: "js/data.txt", // 请求路径
                dataType: "json",   // 预期返回一个 json 类型数据
                success: function (data) {   // data是形参名，代表返回的数据
                    // Dom 操作
                    // 创建 ul
                    var ul = $('<ul></ul>');
                    // 遍历 data
                    for (let i = 0; i < data.length; i++) {
                        // 创建 li
                        var li = '<li>' + data[i].userName + '</li>';
                        // 将 li 追加到 ul 中
                        ul.append(li);
                    }
                    // 将 ul 追加到 body 中
                    $("body").append(ul);
                }
            });
        });
    </script>

</html>